<!--
 * @Author: lijing
 * @e-mail: 1413979079@qq.com
 * @LastEditors: lijing
 * @Date: 2019-10-09 21:12:19
 * @LastEditTime: 2020-06-07 20:44:31
 * @FilePath: \client\src\components\BlogInfo.vue
 * @Description: 博客信息组件
 -->

<template>
  <div class="media">
    <b-card>
      <b-media>
        <b-img :src="blogInfo.blogIcon" slot="aside" width="64" height="64" alt="placeholder"></b-img>
        <h5 align="left">{{blogInfo.blogName}}</h5>
        <p align="left">{{blogInfo.blogDesc}}</p>
      </b-media>
      <hr />
      <!-- 分割线下面是几个链接，分别连接到github、码云、QQ和微信 -->
      <div class="link-icon-box">
        <!-- v-b-popover.hover.top="'GitHub'"属性表示鼠标放在上面的时候会出现GitHub字样 -->
        <b-link
          v-b-popover.hover.top="'GitHub'"
          href="https://github.com/qianyucc"
          target="_blank"
          class="icon iconfont icon-github link-icon"
        ></b-link>
        <b-link
          v-b-popover.hover.top="'码云'"
          href="https://gitee.com/qianyucc/"
          target="_blank"
          class="icon iconfont icon-code link-icon"
        ></b-link>
        <b-link v-b-popover.hover.top="'QQ'" id="add-my-qq" class="icon iconfont icon-qq link-icon"></b-link>
        <!-- 这里使用了popover组件，target属性和上面id绑定，点击之后弹出下面的提示框，placement属性可以设置点击后弹框的位置 -->
        <b-popover target="add-my-qq" title="扫一扫，加我QQ" triggers="focus" placement="bottom">
          <b-img width="150" thumbnail rounded src="/static/images/findme/add_my_qq.jpg"></b-img>
        </b-popover>
        <b-link
          id="add-my-wechat"
          v-b-popover.hover.top="'微信'"
          class="icon iconfont icon-weixin link-icon"
        ></b-link>
        <b-popover target="add-my-wechat" title="扫一扫，加我微信" triggers="focus" placement="bottom">
          <b-img width="150" thumbnail rounded src="/static/images/findme/add_my_wechat.jpg"></b-img>
        </b-popover>
      </div>
    </b-card>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "BlogInfo",
  computed: {
    ...mapState({
      blogInfo: state => state.app.blogInfo
    })
  }
};
</script>

<style scoped>
.card {
  border: none;
}
.text-center {
  text-align: center;
}
.link-icon {
  /*消除下划线*/
  text-decoration: none;
}
.link-icon-box {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
</style>
